<template>
  <div :class="['comment',isShow == true ? 'active':'']" v-if="list.length > 0">
    <c-title :title="title"></c-title>

    <ul v-for="item in list" :key="item.id">
      <li>
        <a href="">
          <comment-item
            :id="item.id"
            :uid="item.uid"
            :nickname="item.nickname"
            :img="item.img"
            :content="item.content"
            :replies="item.replies"
            :likes="item.likes"
            :createdAt="item.createdAt"
          ></comment-item>
        </a>
      </li>
    </ul>
    <div class='mask' v-if="isShow" >
      <div class="mt" @click="show"><van-icon name="arrow-down" /></div>
    </div>

    <div class="more">
      <a href="#/around"> 查看更多内容 </a>
    </div>
  </div>
</template>

<script>
import { initSoundCommentData } from "@/request/api.js";
import CommentItem from "@/views/sound/soundcomp/CommentItem.vue";

export default {
  data() {
    return {
      page: 2,
      pageSize: 10,
      title: "评论",
      totalCount: 0,
      list: [],
      loading: false,
      finished: false,
      isShow: true,
    };
  },
  components: {
    CommentItem,
  },
  props: {
    trackid: {
      type: Number,
    },
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let list = [];
      let { data: res } = await initSoundCommentData({
        page: this.page,
        pageSize: this.pageSize,
        trackId: this.trackid,
      });
      this.totalCount = res.data.totalCount;
      this.title = this.title + "(" + this.totalCount + ")";
      let result = res.data.comments;
      result.forEach((item) => {
        let imgStr = "";
        if (item.smallHeader) {
          if (item.smallHeader.includes("https")) {
            imgStr = item.smallHeader;
          } else {
            imgStr = "https://imagev2.xmcdn.com/" + item.smallHeader;
          }
        }
        let obj = {
          // 评论的id
          id: item.id,
          // 用户id
          uid: item.uid,
          nickname: item.nickname,
          img: imgStr,
          content: item.content,
          likes: item.likes,
          createdAt: item.createdAt,
          replies: item.replies,
          // replies:{
          //     id:item.replies[0].id,
          //     nickname:item.replies[0].nickname,
          //     content:item.replies[0].content,
          //     pNickname:item.replies[0].pNickname,
          // }
        };
        list.push(obj);
      });
      this.list.push(...list);

      this.loading = false;

      if (list.length == 0) {
        this.finished = true;
      }

      console.log("评论", res);
    },

    show() {
        this.isShow = false
    },
  },
};
</script>

<style lang="scss" scoped>
.comment {
  background-color: #fff;
  padding: 15px 15px 80px;

  position: relative;
  margin-bottom: 10px;
  ul {
    li {
      padding: 8px 0;
      a {
        display: block;
      }
    }
  }
  .more {
    text-align: center;
    padding: 15px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    a {
      display: inline-block;
      width: 135px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #fe7959;
    }
  }
  .mask {
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 120px;
    text-align: center;
    left: 0;
    bottom: 50px;
    color: #fe7959;
    font-size: 15px;
    background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0, rgba(255, 255, 255, 0)),
      color-stop(34%, rgba(255, 255, 255, 0.8)),
      color-stop(66%, rgba(255, 255, 255, 0.95)),
      to(#fff)
    );
    background-image: -o-linear-gradient(
      top,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.8) 34%,
      rgba(255, 255, 255, 0.95) 66%,
      #fff 100%
    );
    background-image: linear-gradient(
      -180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.8) 34%,
      rgba(255, 255, 255, 0.95) 66%,
      #fff 100%
    );
    div {
        width: 60px;
        margin: 0 auto;
      font-size: 16px;
      height: 60px;
      line-height: 60px;
    }
  }
}
.comment.active {
  height: 400px;
  overflow: hidden;
}
</style>

